import axios, { AxiosError, type Method } from 'axios'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import router from '@/router'

type ServiceResponse<T> = {
  data: T
  message: string
}

const service = axios.create({
  baseURL: 'https://geek.itheima.net',
  timeout: 20 * 1000,
})

service.interceptors.request.use(
  (confirm) => {
    const { token } = useUserStore()
    if (token) {
      confirm.headers.Authorization = `Bearer ${token}`
    }
    return confirm
  },
  (error) => {
    return Promise.reject(error)
  },
)

service.interceptors.response.use(
  (confirm) => {
    return confirm.data
  },
  (error: AxiosError) => {
    if (error.response?.status == 401) {
      const { removeToken } = useUserStore()
      // 清理失效 token
      removeToken()
      // 跳转到登录页, this.$router 只能在 vue 组件中使用，js 文件中需要手动导入
      router.replace('/login')
      // 错误提示，this.$message 只能在 vue 组件中使用，js 文件中需要手动导入
      ElMessage.error('token 已失效，请重新登录')
      console.log('响应拦截器运行了')
      return
    } else {
      console.log('运行到这了', '运行到这了')
      return Promise.reject(error)
    }
  },
)

const request = <T>(url: string, method: Method = 'GET', data?: object) => {
  return service.request<T, ServiceResponse<T>>({
    url,
    method,
    // 导出一个通用的请求工具函数
    [method.toUpperCase() === 'GET' ? 'params' : 'data']: data,
  })
}

export default request
